.parent1 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;

  .div1 {
    grid-area: 1 / 1 / 6 / 6;
    background-color: #1f2a37;
    border-radius: 0;
  }
}

.parent2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 12px;
  grid-row-gap: 12px;

  div {
    //background-color: #1F2A37;
    border-radius: 0;
  }

  .div1 {
    grid-area: 1 / 1 / 2 / 2;
  }

  .div2 {
    grid-area: 1 / 2 / 2 / 3;
  }

  .div3 {
    grid-area: 2 / 1 / 3 / 2;
  }

  .div4 {
    grid-area: 2 / 2 / 3 / 3;
  }
}

.parent3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 12px;
  grid-row-gap: 12px;

  div {
    border-radius: 0;
  }

  .div1 {
    grid-area: 1 / 1 / 2 / 2;
    background-color: #1f2a37;
    border-radius: 0;
  }

  .div2 {
    grid-area: 1 / 2 / 2 / 3;
    background-color: #1f2a37;
    border-radius: 0;
  }

  .div3 {
    grid-area: 1 / 3 / 2 / 4;
    background-color: #1f2a37;
    border-radius: 0;
  }

  .div4 {
    grid-area: 2 / 1 / 3 / 2;
    background-color: #1f2a37;
    border-radius: 0;
  }

  .div5 {
    grid-area: 2 / 2 / 3 / 3;
    background-color: #1f2a37;
    border-radius: 0;
  }

  .div6 {
    grid-area: 2 / 3 / 3 / 4;
    background-color: #1f2a37;
    border-radius: 0;
  }

  .div7 {
    grid-area: 3 / 1 / 4 / 2;
    background-color: #1f2a37;
    border-radius: 0;
  }

  .div8 {
    grid-area: 3 / 2 / 4 / 3;
    background-color: #1f2a37;
    border-radius: 0;
  }

  .div9 {
    grid-area: 3 / 3 / 4 / 4;
    background-color: #1f2a37;
    border-radius: 0;
  }
}

.parent4 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  div {
    border-radius: 0;
    .s4ksvg{
      transform: scale(0.8);
      margin: 0 5px;
    }
  }

  .div1 {
    .s4ksvg{
      // transform: scale(1);
      margin: 0 10px;
    }
    grid-area: 1 / 1 / 3 / 3;
  }

  .div2 {
    grid-area: 1 / 3 / 2 / 4;
  }

  .div3 {
    grid-area: 2 / 3 / 3 / 4;
  }

  .div4 {
    grid-area: 3 / 1 / 4 / 2;
  }

  .div5 {
    grid-area: 3 / 2 / 4 / 3;
  }

  .div6 {
    grid-area: 3 / 3 / 4 / 4;
  }
}

.parent5 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;

  div {
    border-radius: 0;
    .s4ksvg{
      margin: 0 8px;
    }
  }

  .div1 {
    grid-area: 1 / 1 / 2 / 2;
  }

  .div2 {
    grid-area: 1 / 2 / 2 / 3;
  }

  .div3 {
    grid-area: 1 / 3 / 2 / 4;
  }

  .div4 {
    grid-area: 1 / 4 / 2 / 5;
  }

  .div5 {
    grid-area: 2 / 1 / 3 / 2;
  }

  .div6 {
    grid-area: 2 / 2 / 3 / 3;
  }

  .div7 {
    grid-area: 2 / 3 / 3 / 4;
  }

  .div8 {
    grid-area: 2 / 4 / 3 / 5;
  }

  .div9 {
    grid-area: 3 / 1 / 4 / 2;
  }

  .div10 {
    grid-area: 3 / 2 / 4 / 3;
  }

  .div11 {
    grid-area: 3 / 3 / 4 / 4;
  }

  .div12 {
    grid-area: 3 / 4 / 4 / 5;
  }

  .div13 {
    grid-area: 4 / 1 / 5 / 2;
  }

  .div14 {
    grid-area: 4 / 2 / 5 / 3;
  }

  .div15 {
    grid-area: 4 / 3 / 5 / 4;
  }

  .div16 {
    grid-area: 4 / 4 / 5 / 5;
  }
}

.parent6 {
  display: grid;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-template-rows: repeat(4, 1fr) !important;
  grid-column-gap: 10px !important;
  grid-row-gap: 10px !important;

  div {
    border-radius: 0;
  }

  .div1 {
    grid-area: 1 / 1 / 2 / 2;
  }

  .div2 {
    grid-area: 1 / 2 / 2 / 3;
  }

  .div3 {
    grid-area: 1 / 3 / 2 / 4;
  }

  .div4 {
    grid-area: 1 / 4 / 2 / 5;
  }

  .div5 {
    grid-area: 2 / 1 / 3 / 2;
  }

  .div6 {
    grid-area: 2 / 4 / 3 / 5;
  }
  
  .div7 {
    grid-area: 3 / 1 / 4 / 2;
  }
  
  .div8 {
    grid-area: 3 / 4 / 4 / 5;
  }
  
  .div9 {
    grid-area: 4 / 1 / 5 / 2;
  }
  
  .div10 {
    grid-area: 4 / 2 / 5 / 3;
  }
  
  .div11 {
    grid-area: 4 / 3 / 5 / 4;
  }
  
  .div12 {
    grid-area: 4 / 4 / 5 / 5;
  }
  
  .div13 {
    grid-area: 2 / 2 / 4 / 4;

    svg {
      transform: scale(1.5) !important;
      margin-left: 10px;
    }
    .s4ksvg{
      margin: 0 15px 10px;
    }
  }
}

.parent7 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;

  div {
    border-radius: 0;
    .s4ksvg{
      transform: scale(1.3);
      margin:0 8px !important;
    }
  }

  .div1 {
    grid-area: 1 / 1 / 3 / 3;
    .s4ksvg{
      transform: scale(2);
      margin:0 14px 10px !important;
    }
  }

  .div2 {
    grid-area: 3 / 1 / 4 / 2;
  }

  .div3 {
    grid-area: 3 / 2 / 4 / 3;
  }

  .div4 {
    grid-area: 4 / 1 / 5 / 2;
  }

  .div5 {
    grid-area: 4 / 2 / 5 / 3;
  }

  .div6 {
    grid-area: 1 / 3 / 3 / 5;
    .s4ksvg{
      transform: scale(2);
      margin:0 14px 10px !important;
    }
  }

  .div7 {
    grid-area: 3 / 3 / 4 / 4;
  }

  .div8 {
    grid-area: 3 / 4 / 4 / 5;
  }

  .div9 {
    grid-area: 4 / 3 / 5 / 4;
  }

  .div10 {
    grid-area: 4 / 4 / 5 / 5;
  }
}

.parent8 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;

  div {
    border-radius: 0;
    .s4ksvg{
      transform: scale(1.2);
      margin: 0 8px;
    }
  }

  .div1 {
    grid-area: 1 / 1 / 4 / 4;

    .s4ksvg{
      transform: scale(1.8);
      margin-left: 20px;
      margin-bottom: 5px;
    }
  }

  .div2 {
    grid-area: 1 / 4 / 2 / 5;
  }

  .div3 {
    grid-area: 2 / 4 / 3 / 5;
  }

  .div4 {
    grid-area: 3 / 4 / 4 / 5;
  }

  .div5 {
    grid-area: 4 / 4 / 5 / 5;
  }

  .div6 {
    grid-area: 4 / 1 / 5 / 2;
  }

  .div7 {
    grid-area: 4 / 2 / 5 / 3;
  }

  .div8 {
    grid-area: 4 / 3 / 5 / 4;
  }
}

.parent9 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;

  div {
    border-radius: 0;
  }

  .div1 {
    grid-area: 1 / 1 / 2 / 2;
  }

  .div2 {
    grid-area: 1 / 2 / 2 / 3;
  }

  .div3 {
    grid-area: 1 / 3 / 2 / 4;
  }

  .div4 {
    grid-area: 1 / 4 / 2 / 5;
  }

  .div5 {
    grid-area: 1 / 5 / 2 / 6;
  }

  .div6 {
    grid-area: 1 / 6 / 2 / 7;
  }

  .div7 {
    grid-area: 2 / 1 / 3 / 2;
  }

  .div8 {
    grid-area: 2 / 2 / 3 / 3;
  }

  .div9 {
    grid-area: 2 / 3 / 3 / 4;
  }

  .div10 {
    grid-area: 2 / 4 / 3 / 5;
  }

  .div11 {
    grid-area: 2 / 5 / 3 / 6;
  }

  .div12 {
    grid-area: 2 / 6 / 3 / 7;
  }

  .div13 {
    grid-area: 3 / 1 / 4 / 2;
  }

  .div14 {
    grid-area: 3 / 2 / 4 / 3;
  }

  .div15 {
    grid-area: 3 / 3 / 4 / 4;
  }

  .div16 {
    grid-area: 3 / 4 / 4 / 5;
  }

  .div17 {
    grid-area: 3 / 5 / 4 / 6;
  }

  .div18 {
    grid-area: 3 / 6 / 4 / 7;
  }

  .div19 {
    grid-area: 4 / 1 / 5 / 2;
  }

  .div20 {
    grid-area: 4 / 2 / 5 / 3;
  }

  .div21 {
    grid-area: 4 / 3 / 5 / 4;
  }

  .div22 {
    grid-area: 4 / 4 / 5 / 5;
  }

  .div23 {
    grid-area: 4 / 5 / 5 / 6;
  }

  .div24 {
    grid-area: 4 / 6 / 5 / 7;
  }

  .div25 {
    grid-area: 5 / 1 / 6 / 2;
  }

  .div26 {
    grid-area: 5 / 2 / 6 / 3;
  }

  .div27 {
    grid-area: 5 / 3 / 6 / 4;
  }

  .div28 {
    grid-area: 5 / 4 / 6 / 5;
  }

  .div29 {
    grid-area: 5 / 5 / 6 / 6;
  }

  .div30 {
    grid-area: 5 / 6 / 6 / 7;
  }

  .div31 {
    grid-area: 6 / 1 / 7 / 2;
  }

  .div32 {
    grid-area: 6 / 2 / 7 / 3;
  }

  .div33 {
    grid-area: 6 / 3 / 7 / 4;
  }

  .div34 {
    grid-area: 6 / 4 / 7 / 5;
  }

  .div35 {
    grid-area: 6 / 5 / 7 / 6;
  }

  .div36 {
    grid-area: 6 / 6 / 7 / 7;
  }
}

.parent10 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  div {
    border-radius: 0;
  }
}
@media screen and (min-width: 2560px) {
  .parent1{
    .div1{
      .s4klive3d{
        transform: scale(0.8);
        left: 3%;
        bottom: 10px;
        span{
          margin: 10px 0;
        }
      }
      .s4ksvg{
        transform: scale(1.2);
        margin: 0 20px 15px;
      }
    }
  }
  .parent2{
    div {
      .s4klive3d{
        transform: scale(0.7);
        left: 3.5%;
        bottom: 0px;
        span{
          margin: 10px 0;
        }
      }
      .s4ksvg{
        transform: scale(1.2);
        margin: 0 15px 15px;
      }
    }
  }
  .parent3{
    div {
      .s4klive3d{
        transform: scale(0.7);
        left: 4%;
        bottom: -10px;
        span{
          margin: 10px 0;
        }
      }
      .s4ksvg{
        margin: 0 10px 15px;
      }
    }
  }
  .parent4{
    div{
      .s4klive3dsmall{
        transform: scale(0.9);
        left: 6%;
        top: 0px;
        span{
          margin: 10px 0;
        }
      }
      .s4ksvg{
        transform: scale(1.2);
        margin: 0 22px;
      }
    }
    .div1 {
      .s4klive3d{
        transform: scale(0.9);
        left: 4%;
        bottom: 10px;
        span{
          margin: 10px 0;
        }
      }
      .s4ksvg{
        margin: 0 20px 20px;
      }
    }
  }
  .parent5{
    div{
      .s4klive3dsmall{
        transform: scale(0.8);
        left: 7%;
        top: 0px;
        span{
          margin: 10px 0;
        }
      }
      .s4ksvg{
        margin: 0 15px;
      }
    }
  }
  .parent6{
    div{
      .s4klive3dsmall{
        transform: scale(0.8);
        left: 7%;
        top: 0px;
        span{
          margin: 10px 0;
        }
      }
      .s4ksvg{
        transform: scale(1.2);
        margin: 0 15px;
      }
    }
    .div13 {
      .s4klive3d{
        transform: scale(0.9);
        left: 4%;
        bottom: 0px;
        span{
          margin: 10px 0;
        }
      }
      .s4ksvg{
        transform: scale(2.3) !important;
        margin: 0 22px 20px;
      }
    }
  }
  .parent7{
    div {
      .s4klive3dsmall{
        transform: scale(0.8);
        left: 6%;
        top: 0px;
        span{
          margin: 10px 0;
        }
      }
      .s4ksvg{
        transform: scale(2.5) !important;
        margin: 0 25px 5px !important;
      }
    }
    .div1, .div6{
      .s4klive3d{
        transform: scale(0.9);
        left: 4%;
        bottom: 5px;
        span{
          margin: 10px 0;
        }
      }
      .s4ksvg{
        transform: scale(2.5) !important;
        margin: 0 23px 20px !important;
      }
    }
  }
  .parent8{
    div {
      .s4klive3dsmall{
        transform: scale(0.8);
        left: 6%;
        top: 0px;
        span{
          margin: 10px 0;
        }
      }
      .s4ksvg{
        transform: scale(2) !important;
        margin: 0 20px !important;
      }
    }
    .div1 {
      .s4klive3d{
        transform: scale(0.9);
        left: 4%;
        bottom: 10px;
        span{
          margin: 10px 0;
        }
      }
      .s4ksvg{
        transform: scale(3.5);
        margin: 0 30px 15px !important;
      }
    }
  }
  .parent9{
    div {
      .s4klive3dsmall{
        transform: scale(0.7);
        left: 8%;
        top: -0px;
        span{
          margin: 10px 0;
        }
      }
      border-radius: 0;
      .s4ksvg{
        margin: 0 12px;
        transform: scale(1.3);
      }
    }
  }
}
@media screen and (min-width: 3840px) {
  .parent1{
    .div1{
      .s4klive3d{
        left: 2%;
        margin-bottom: 15px;
        span{
          margin: 11px 0;
        }
      }
      .s4ksvg{
        margin: 0 25px 15px;
      }
    }
  }
  .parent2{
    div {
      .s4ksvg{
        margin: 0 20px 15px;
      }
    }
  }
  .parent3{
    div {
      .s4ksvg{
        margin: 0 20px 15px;
      }
    }
  }
  .parent4{
    div{
      .s4ksvg{
        transform: scale(1.5);
        margin: 0 22px;
      }
    }
    .div1 {
      .s4ksvg{
        margin: 0 20px 20px;
      }
    }
  }
  .parent5{
    div{
      .s4ksvg{
        margin: 0 20px;
      }
    }
  }
  .parent6{
    div{
      .s4ksvg{
        margin: 0 20px;
      }
    }
    .div13 {
      .s4ksvg{
        transform: scale(2.3) !important;
        margin: 0 22px 20px;
      }
    }
  }
  .parent7{
    div {
      .s4ksvg{
        transform: scale(3) !important;
        margin: 0 25px 5px !important;
      }
    }
    .div1, .div6{
      .s4ksvg{
        transform: scale(4) !important;
        margin: 0 38px 40px  !important;
      }
    }
  }
  .parent8{
    div {
      .s4ksvg{
        transform: scale(2.5);
        margin: 0 25px;
      }
    }
    .div1 {
      .s4ksvg{
        transform: scale(3.5) !important;
        margin: 0 36px 25px !important;
      }
    }
  }
  .parent9{
     div {
       border-radius: 0;
       .s4klive3d{
         left: 9%;
       }
       .s4ksvg{
         margin: 0 20px 10px;
         transform: scale(2.3);
       }
     }
  }
  .parent10{
    div {
      border-radius: 0;
      .s4klive3d{
        left: 5%;
       }
       .s4ksvg{
        margin: 0 25px 25px;
        transform: scale(2);
      }
    }
  }
}